<template>
	<view class="box">
		<view class="teacher">
			<image :src="teacherDetail.photo" mode="aspectFill"></image>
			<view class="info">
				<view class="name">
					<text>{{teacherDetail.name}}</text>
				</view>
				<view class="grade">
					<u-rate :value="teacherDetail.grade" disabled></u-rate>
				</view>
				<view class="degree">
					学历：{{teacherDetail.degree}}
				</view>
				<view class="major">
					专业：{{teacherDetail.major}}
				</view>
				<view class="teacher-info">
					<text>个人介绍：\n</text>
					{{teacherDetail.intro}}
				</view>
			</view>
		</view> 
		
		<scroll-view class="scroll" scroll-y="true" upper-threshold="440rpx">
			<view class="teaching">
				<text class="title">在授课程</text>
				<view class="course" :key="index" v-for="(teach,index) in teacherDetail.teach" @click="poping">
					<image :src="teach.courseUrl" mode="aspectFill"></image>
					<view class="content">
						<view class="courseName">
							{{teach.stage}} {{teach.name}}
						</view> 
						<view class="courseInfo">
							{{teach.courseInfo}}
						</view> 
					</view>
				</view>
				<text class="title">学生评价</text>
				<view class="comment" :key="index" v-for="(item,index) in teacherDetail.comment">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view class="c-content">
						<view class="c-name">
							{{item.name}}
						</view>
						<view class="c-time">
							{{item.day}}&nbsp;{{item.time}}
						</view>
						<view class="c-grade">
							<u-rate :value="item.grade" disabled></u-rate>
						</view>
						<view class="c-text">
							{{item.text}}
						</view>
						<u-line color="rgb(19,152,157)"></u-line>
					</view>
				</view>
			</view>
		</scroll-view>
		
		
		<view class="booking">
			<!-- <u-toast ref="uToast"></u-toast> -->
			<u-popup :round="10" :show="show"
				@close="close" @open="open" :mode="bottom" 
				length="60%">
				<view class="content">
					<view class="title">
						预约
					</view>
					<form @submit="formSubmit">
						<view class="timeChoose">
							预约时间：
							<picker mode="time" :value="time" start="07:59" end="21:01" @change="bindTimeChange">
								<view class="uni-input">{{time}}</view>
							</picker>
						</view>
						<view class="course">
							预约课程：语文
						</view>
						<view class="dayChoose">
							上课日期：
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="uni-input">{{date}}</view>
							</picker>
						</view>
						<view class="wayChoose">
							上课方式：
							<radio-group name="上课方式">
								<label>
									<radio value="线上" /><text>线上</text>
								</label>
								<label>
									<radio value="线下" /><text>线下</text>
								</label>
							</radio-group>
						</view>
						<button form-type="submit">立即预定</button>
						<button>进行沟通</button>
					</form>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import data from "@/Components/teacherInfo.js"
	export default{
		data(){
			const currentDate=this.getDate({
				format:true
			})
			return{
				time:"08:00",
				date:currentDate,
				teacherDetail:{},
				id:1,
				show:false
			}
		},
		onLoad(e) {
			console.log((e))
			this.id=e.id
			this.teacherDetail=data.teacherInfo[this.id-1]
			// console.log(teacherDetail)
			// console.log(data.teacherInfo[this.id])
		},
		computed:{
			starDate(){
				return this.getDate('start');
			},
			endDate(){
				return this.getDate('end');
			}
		},
		methods:{
			
			open(){
				this.show=true
			},
			poping(){
				this.show=true
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			bindTimeChange: function(e) {
				this.time = e.detail.value
			},
			columnChange(e) {
				const { column, value } = e.detail;
				this.courseIndex.splice(column, 1, value);
				if(column == 0) {
					this.courseList.splice(column + 1, 1, courseJson[value]);
				}
			},
			close(){
				this.show=false
			},
			btnClick(){
				this.show=true
			},
			getDate(type){
				const date=new Date();
				let year=date.getFullYear();
				let month=date.getMonth();
				let day=date.getDate();
				
				if(type==='start'){
					year=year-1;
				}else if(type==='end'){
					year=year+2;
				}
				
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	page{
		margin: 0;
		padding: 0;
		height: 100%;
		background-image: linear-gradient(to right,rgb(19,152,157),rgba(71,173,178,0.8));
	}
	
	.box{
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.teacher{
		width: 100%;
		display: flex;
		padding: 20rpx;
		justify-content: space-around;
	}
	.teacher image{
		height: 420rpx;
		width: 280rpx;
		border-radius: 30rpx;
	}
	.teacher .info{
		width: 50%;
		height: 400rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.teacher .name{
		font-size: 50rpx;
	}
	
	.title{
		width: 100%;
		font-size: 40rpx;
		margin-left: 10%;
		padding: 1%;
		font-weight: bold;
	}
	.scroll{
		/* margin-top: 440rpx; */
		overflow: scroll;
		background-color: #f3f4f6;
		border-radius: 50rpx 50rpx 0 0;
	}
	
	.teaching{
		/* margin-top: 30rpx; */
		padding: 2%;
		height: 100%;
		font-size: 40rpx;
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
	}
	.teaching .course{
		width: 90%;
		background-color: #fff;
		margin-bottom: 20rpx;
		display: flex;
		border-radius: 20rpx;
	}
	.teaching .course image{
		width: 200rpx;
		height: 200rpx;
		padding: 6rpx;
	}
	.teaching .course .content{
		/* height: 160rpx; */
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		/* align-content: space-around; */
		justify-content: space-around;
	}
	.teaching .course .content .courseInfo{
		font-size: 30rpx;
	}
	
	.comment{
		display: flex;
		width: 90%;
		padding-top: 30rpx;
		/* padding-bottom: 30rpx; */
		background-color: #fff;
		justify-content: space-around;
	}
	.comment image{
		height: 90rpx;
		width: 90rpx;
		border-radius: 50%;
	}
	
	.comment .c-content{
		width: 70%;
	}
	.comment .c-content .c-time{
		font-size: 30rpx;
		color: #767676;
	}
	.comment .c-content .c-text{
		margin-bottom: 30rpx;
	}
</style>